<template>
  <div class="inner-container">
    <!-- --------------------------------------------------修改表单-------------------------------------------------------- -->
    <el-form ref="formRef" :model="formData" label-width="100px" label-position="left">
      <div class="section-title">转单
        <el-button  style="float: right;position: relative;bottom: 12px" type="primary" @click="queryCust">点此查看此订单对应的客户信息</el-button>
      </div>

      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="24">
          <span style="color: #606266;font-size: 14px">一阶段 施工图纸</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="2">
          <span style="color: #606266;font-size: 14px">图纸类型</span>
        </el-col>
        <el-col :span="20">
          <span style="color: #606266;font-size: 14px">原始电位图</span>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 30px">
        <el-col>
          <el-upload
              ref="uploadEle"
              :file-list="fileListElectricity"
              :action="electricityUrl"
              name="file"
              :limit="4"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :auto-upload="false"
              :headers="tokenHeaders"
          >
            <el-icon>
              <img src="../../../../public/order/st1.png"/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" />
          </el-dialog>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="2">
          <span style="color: #606266;font-size: 14px">图纸类型</span>
        </el-col>
        <el-col :span="20">
          <span style="color: #606266;font-size: 14px">原始水位图</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-upload
              ref="uploadWater"
              v-model:file-list="fileListWater"
              v-model:action="waterUrl"
              name="file"
              :limit="4"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :auto-upload="false"
              :headers="tokenHeaders"
          >
            <el-icon>
              <img src="../../../../public/order/st1.png"/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" />
          </el-dialog>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="21"> </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="submitDrawing">提交图纸至工程部审核</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="24">
          <span style="color: #606266;font-size: 14px">三阶段 方案预演</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="主讲人">
            <el-input v-model="schemeParam.compere"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="参与预演人员">
            <el-input v-model="schemeParam.participate"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 5px">
        <el-col :span="12">
          <el-form-item label="预演记录">
            <el-input v-model="schemeParam.logs"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 30px">
        <el-col :span="22"> </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="submitPreview">提交预演记录</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="3">
          <span style="color: #606266;font-size: 14px">四阶段 设计师谈单</span>
        </el-col>
        <el-col :span="5" style="position: relative;right: 60px;bottom: 2px">
          <el-select v-model="orderStatus" placeholder="选择转单状态" @change="changeOrderStatus">
            <el-option value="80" label="转单完成(财务待确认工程订单)"></el-option>
            <el-option value="60" label="退单(处理中)"></el-option>
            <el-option value="70" label="死单(处理中)"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16"> </el-col>
      </el-row>
      <el-row v-if="succeed">
        <span>转单完成后,由财务部门在财务管理模块中填写合同签约信息,确认工程订单</span>
      </el-row>
      <el-row v-if="refund">
        <el-col :span="16">
          <el-form-item label="退款原因">
            <el-input v-model="refundParam.reasonOrder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="退款金额">
            <el-input v-model="refundParam.reasonMoney"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上传附件">
            <el-col>
              <el-upload
                  ref="uploadRe"
                  v-model:file-list="fileList"
                  v-model:action="actionUrl"
                  name="file"
                  :limit="1"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :headers="tokenHeaders"
              >
                <el-icon>
                  <img src="../../../../public/order/st1.png"/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" />
              </el-dialog>
            </el-col>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="submitRefund" style="position: relative;left: 1430px">提交</el-button>
        <el-button @click="reOrder"  style="position: relative;left: 1430px">重置</el-button>
      </el-row>
      <el-row v-if="end">
        <el-form-item label="死单原因">
          <el-input type="textarea" style="width: 800px;" :rows="12" resize="none" v-model="dieParam.reason"/>
          <el-button type="primary" @click="submitDie" style="position: relative;left: 60px;top: 120px;">提交</el-button>
          <el-button @click="reOrder" style="position: relative;left: 60px;top: 120px">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import result from "@/utils/request"


const orderId = new URLSearchParams(window.location.search).get('id');
const tokenHeaders = ref({token: localStorage.getItem('token')})

const route = useRoute()
const router = useRouter()
const userId = ref();
const queryCust = () => {
  result.get("/api/crm/orders/getUserId?id="+orderId).then((res) => {
    userId.value = res.data;
    console.log(res.data);
    router.push({path: '/crm/customer/info', query: {id: userId.value }})
  });
}

//
//--------

const uploadRe = ref();
const actionUrl = ref(BASE_URL+PNG_PATH+'/uploadR'+'/'+orderId);
const refundParam = ref({
  orderId: '',
  reasonOrder: '',
  reasonMoney: '',
});
const submitRefund = () => {

  refundParam.value.orderId=orderId;
  result.post("/api/crm/orders/refundAdd",refundParam.value).then((res) => {
    ElMessage.success('提交成功');
  })
}



//---------------------------------------

const schemeParam = ref({
  id: '',
  compere: '',
  participate: '',
  logs: ''
});
const submitPreview = () => {
  schemeParam.value.id = orderId;
  result.post("/api/crm/orders/addScheme", schemeParam.value).then((res) => {
    ElMessage.success('提交成功');
  })
}




// --------------------------------------------------
//图片上传
const uploadEle = ref();
const uploadWater = ref();
const fileListElectricity = ref([]);
const electricityUrl = ref(BASE_URL+PNG_PATH+'/upload/电位图/'+orderId);
const fileListWater = ref([]);
const waterUrl = ref(BASE_URL+PNG_PATH+'/upload/水位图/'+orderId);
const submitDrawing = () => {
  console.log(orderId);
  uploadEle.value.submit();
  uploadWater.value.submit();
}




const orderStatus = ref();
const succeed = ref(false);
const refund = ref(false);
const end = ref(false);
const changeOrderStatus = () => {
  if (orderStatus.value == '80'){
    succeed.value = true;
    refund.value = false;
    end.value = false;
  }else if (orderStatus.value == '60'){
    refund.value = true;
    succeed.value = false;
    end.value = false;
  }else if (orderStatus.value == '70'){
    refund.value = false;
    succeed.value = false;
    end.value = true;
  }
}
const dieParam = ref({
  orderId: '',
  reason: '',
});
const submitDie = () => {
  dieParam.value.orderId = orderId;
  result.post("/api/crm/orders/dieOrder",dieParam.value).then((res) => {
    ElMessage.success('提交成功');
  })
}

const reOrder = () => {
  refundParam.value = {
    id: '',
    reasonOrder: '',
    reasonMoney: 0,
  }
  ElMessage.success('成功');
}






const formRef = ref()
const formData = ref({
  id: undefined,
  status: '10',
  type: '10',
  name: undefined,
  gender: undefined,
  age: undefined,
  contactPhone: undefined,
  idNumber: undefined,
  emergencyPhone: undefined,
  emergencyContact: undefined,
  propertyName: undefined,
  houseType: '10',
  houseSize: undefined,
  province: undefined,
  city: undefined,
  district: undefined,
  propertyAddr: undefined
})
// const formRules = ref({
//   type: [{required: true, message: '客户类型为必选项'}],
//   name: [{required: true, message: '客户名称为必填项'}],
//   contactPhone: [{required: true, message: '联系电话为必填项'}],
//   propertyName: [{required: true, message: '楼盘名称为必填项'}],
//   houseType: [{required: true, message: '户型为必选项'}],
//   houseSize: [{required: true, message: '面积为必填项'}],
//   province: [{required: true, message: '省份为必选项'}],
//   city: [{required: true, message: '城市为必选项'}],
//   district: [{required: true, message: '区县为必选项'}],
//   propertyAddr: [{required: true, message: '详细地址为必填项'}],
// })

const saveCustomer = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    // request({
    //   url: '/api/crm/customers',
    //   method: 'put',
    //   data: formData.value
    // }).then(res => {
    //   ElMessage.success('修改成功')
    //   router.push('/crm/customer')
    // })
    ElMessage.success('修改成功')
    router.push('/crm/customer')
  })
}

const loadCustomer = () => {
  let id = route.query.id
  console.log(id)
  // request({
  //   url: '/api/crm/customers/' + route.query.id
  // }).then(res => {
  //   formData.value = res.data
  // })
}

onMounted(() => {
  loadCustomer()
});



const fileList = ref([]);

const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  result.post(BASE_URL+PNG_PATH+'/remove',uploadFile.response.data)
      .then(
          (res) => {
            ElMessage.success('删除成功');
          }
      )
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
  console.log(uploadFile);
  console.log(fileList.value);
}



</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}
</style>
